
<!--  -->
<template>
<div>
  <el-checkbox
    :indeterminate="isIndeterminate"
    v-model="checkAll"
    @change="handleCheckAllChange"
    >全选</el-checkbox>
    <span class="box">春运方式</span>
  <div style="margin: 15px 0"></div>
  <el-checkbox-group
    v-model="checkedCities"
    @change="handleCheckedCitiesChange"
  >
    <el-checkbox v-for="city in cities" :label="city" :key="city">
      {{city}}</el-checkbox>
  </el-checkbox-group>
  </div>
</template>

<script>
  const cityOptions = ['火车', '高铁', '长途汽车', '飞机','火箭'];
  export default {
    data() {
      return {
        checkAll: false,
        checkedCities: ['高铁'],
        cities: cityOptions,
        isIndeterminate: true
      };
    },
    methods: {
      handleCheckAllChange(val) {
        this.checkedCities = val ? cityOptions : [];
        this.isIndeterminate = false;
      },
      handleCheckedCitiesChange(value) {
        let checkedCount = value.length;
        this.checkAll = checkedCount === this.cities.length;
        this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
      }
    }
  };
</script>
<style  scoped>
.box{
  margin-left: 30px;
}
</style>